import React, { Component } from 'react'
import { email_reg, pwd_reg } from '../../utils/Regexp.js';
import Request from '../../utils/Request';

import Icon from 'Assets/icon.png'
import style from './account.scss'
import { Form, Input, Button, } from 'antd';

class index extends Component {
  state = {
    email: '164591357@qq.com'
  };
  // 自动校验表单规则
  validatorForm = (rule, value, callback) => {
    // rule.pattern 自定义校验邮箱规则,和密码
    if (value && rule.pattern && !value.match(rule.pattern)) {
      callback(rule.message);
    } else {
      callback();
    }
  }
  // 校验两次输入的密码是否一致
  validatorPwd = (rule, value, callback) => {
    if (value !== this.props.form.getFieldValue('pwd')) {//this.props.form.getFieldValue('pwd')获取一个输入控件的值,如果和上input密码不一致就回调
      callback(rule.message);
      return;
    }
    callback();
  };
  // 点击提交
  handleSubmit=e=> {
    e.preventDefault();
    this.props.form.validateFields((err,values)=>{//提示错误,记录正确的值
      if(!err){//正确情况下发起请求
       const {email,pwd} = values;
      //  发起网络请求,把数据存入服务器
      Request('/user.json',{method:"post",data:{email,pwd}}).then(res =>{
        // console.log(res) 成功后跳转至login.js
        if(res.status === 200 && res.data){
         this.props.history.push('/login')
        }
      })
      }
    })
  }

  render() {
    // from提供的方法,getFieldDecorator	用于和表单进行双向绑定 https://ant.design/components/form-cn/#components-form-demo-dynamic-rule
    const { getFieldDecorator } = this.props.form;
    return (
      <div className={style.account}>
        <img src={Icon} alt="logo图片" className={style.logo} />
        <Form className="account-form">
          <Form.Item label="邮箱">
            {/* getFieldDecorator 需要绑定的自定义类型,对象,绑定哪个双向数据, */}
            {getFieldDecorator("email", {
              rules: [//rules为校验规则
                {
                  required: true,
                  message: '邮箱不能为空,请填写正确的邮箱!'
                },
                // {
                //   type:"email",
                //   message:'请输入正确的邮箱,如:164591357@qq.com'
                // }
                {
                  pattern: email_reg,//自定义校验邮箱规则
                  validator: this.validatorForm,//自定义校验（注意，callback 必须被调用）
                  message: '请输入正确的邮箱,如:164591357@qq.com'
                }
              ]
              // initialValue:this.state.email,//子节点的初始值
            })(<Input type="email" />)}
          </Form.Item>
          <Form.Item label="密码">
            {getFieldDecorator('pwd', {
              rules: [
                {
                  required: true,
                  message: '密码不能为空，请输入密码！'
                },
                {
                  pattern: pwd_reg,
                  validator: this.validatorForm,
                  message:
                    '请输入正确的密码格式：6-16位字母、数字或特殊字符 _-.'
                }
              ]
            })(
              <Input
                maxLength={16}
                type="password"
                placeholder="请输入6-16位字母、数字或特殊字符的密码"
              />
            )}
          </Form.Item>
          <Form.Item label="确认密码">
            {getFieldDecorator('aPwd', {
              rules: [
                {
                  required: true,
                  message: '密码不能为空，请输入密码！'
                },
                {
                  pattern: pwd_reg,
                  validator: this.validatorForm,
                  message:
                    '请输入正确的密码格式：6-16位字母、数字或特殊字符 _-.'
                },
                {
                  validator: this.validatorPwd,
                  message: '两次输入的密码不一致！'
                }
              ]
            })(
              <Input
                maxLength={16}
                type="password"
                placeholder="请输入确认密码"
              />
            )}
          </Form.Item>
          <Form.Item>
            <Button className="btn" type="primary"  onClick={this.handleSubmit} >注册</Button>
          </Form.Item>
        </Form>
      </div>
    )
  }
}
export default Form.create()(index)
